<script setup>
import { ref, onMounted, watch } from 'vue'
import * as echarts from 'echarts'
import { ElDatePicker, ElButton, ElTable, ElTableColumn, ElPagination } from 'element-plus'
import * as XLSX from 'xlsx'

// 顶部筛选
const dateRange = ref([
  '2025-03-13',
  '2025-04-12',
])

// 交易概况卡片数据
const overviewList = ref([
  { label: '团长数', value: '6,030', trend: -10 },
  { label: '新增团长', value: '856', trend: -10 },
  { label: '活跃团长', value: '2,344', trend: -10 },
  { label: '团长佣金（元）', value: '1,000.00', trend: -10 },
  { label: '分享订单', value: '2,343', trend: -10 },
])

// 区域分布饼图数据
const areaData = ref([
  { name: '海淀区', value: 1339 },
  { name: '东城区', value: 1099 },
  { name: '朝阳区', value: 1094 },
  { name: '顺义区', value: 889 },
  { name: '昌平区', value: 450 },
  { name: '丰台区', value: 381 },
  { name: '石景山区', value: 250 },
  { name: '通州区', value: 212 },
  { name: '大兴区', value: 211 },
  { name: '其他', value: 189 },
])

// 门店排行数据
const storeTab = ref('amount')
const storeRank = ref({
  amount: [
    { name: '海淀区', value: 1339 },
    { name: '东城区', value: 1099 },
    { name: '朝阳区', value: 1094 },
    { name: '顺义区', value: 889 },
    { name: '昌平区', value: 450 },
    { name: '丰台区', value: 381 },
    { name: '石景山区', value: 250 },
    { name: '通州区', value: 212 },
    { name: '大兴区', value: 211 },
    { name: '其他', value: 189 },
  ],
  order: [
    { name: '海淀区', value: 900 },
    { name: '东城区', value: 800 },
    { name: '朝阳区', value: 700 },
    { name: '顺义区', value: 600 },
    { name: '昌平区', value: 500 },
    { name: '丰台区', value: 400 },
    { name: '石景山区', value: 300 },
    { name: '通州区', value: 200 },
    { name: '大兴区', value: 150 },
    { name: '其他', value: 100 },
  ]
})

// 团长增长表格数据
const growthTable = ref([
  { date: '2025-03-21', newLeader: 690, commission: '1,292', activeLeader: '6,274', shareOrder: '19,206' },
  { date: '2025-03-20', newLeader: 500, commission: '1,352', activeLeader: '6,252', shareOrder: '19,061' },
  { date: '2025-03-19', newLeader: 500, commission: '1,218', activeLeader: '6,221', shareOrder: '18,914' },
  { date: '2025-03-18', newLeader: 500, commission: '1,301', activeLeader: '6,205', shareOrder: '18,892' },
])
const growthTotal = ref(50)
const growthPage = ref(1)
const growthPageSize = ref(10)
const handleSizeChange = (size) => { growthPageSize.value = size }
const handlePageChange = (page) => { growthPage.value = page }

// 图表渲染
const renderCharts = () => {
  // 区域分布饼图
  const pie = echarts.init(document.getElementById('areaPie'))
  pie.setOption({
    tooltip: { trigger: 'item' },
    legend: { left: 'right', top: 'center', orient: 'vertical' },
    series: [{
      name: '区域分布',
      type: 'pie',
      radius: '70%',
      center: ['35%', '50%'],
      data: areaData.value,
      label: { formatter: '{b}\n{c}' },
      emphasis: {
        itemStyle: { shadowBlur: 10, shadowColor: 'rgba(0,0,0,0.2)' }
      }
    }]
  })
  // 门店排行条形图
  const bar = echarts.init(document.getElementById('storeBar'))
  bar.setOption({
    tooltip: { trigger: 'axis', axisPointer: { type: 'shadow' } },
    legend: { show: false },
    grid: { left: 60, right: 20, top: 20, bottom: 20 },
    xAxis: { type: 'value', boundaryGap: [0, 0.01] },
    yAxis: {
      type: 'category',
      data: storeRank.value[storeTab.value].map(i => i.name)
    },
    series: [{
      type: 'bar',
      data: storeRank.value[storeTab.value].map(i => i.value),
      itemStyle: {
        color: storeTab.value === 'amount' ? '#409EFF' : '#67C23A',
        borderRadius: [0, 8, 8, 0]
      },
      barWidth: 18
    }]
  })
}

const handleExport = () => {
  const ws = XLSX.utils.json_to_sheet(growthTable)
  const wb = XLSX.utils.book_new()
  XLSX.utils.book_append_sheet(wb, ws, '团长增长')
  XLSX.writeFile(wb, '团长增长数据.xlsx')
}

const handleExportArea = () => {
  const ws = XLSX.utils.json_to_sheet(areaData.value)
  const wb = XLSX.utils.book_new()
  XLSX.utils.book_append_sheet(wb, ws, '区域分布')
  XLSX.writeFile(wb, '区域分布数据.xlsx')
}
const handleExportStore = () => {
  const ws = XLSX.utils.json_to_sheet(storeRank.value[storeTab.value])
  const wb = XLSX.utils.book_new()
  XLSX.utils.book_append_sheet(wb, ws, '门店排行')
  XLSX.writeFile(wb, `门店排行-${storeTab.value==='amount'?'销售金额':'销售订单'}.xlsx`)
}

onMounted(() => {
  setTimeout(renderCharts, 100)
})
watch(storeTab, () => setTimeout(renderCharts, 100))
</script>

<template>
  <div class="leader-analysis">
    <!-- 顶部标题与筛选 -->
    <div class="page-header">
      <div class="header-title">团长分析</div>
      <div class="header-filter">
        <span class="filter-label">数据筛选：</span>
        <el-date-picker
          v-model="dateRange"
          type="daterange"
          range-separator="至"
          start-placeholder="开始日期"
          end-placeholder="结束日期"
          size="small"
          style="width: 260px;"
        />
      </div>
    </div>

    <!-- 交易概况卡片 -->
    <div class="overview-cards">
      <div class="card" v-for="item in overviewList" :key="item.label">
        <div class="card-value">{{ item.value }}</div>
        <div class="card-label">{{ item.label }}</div>
        <div class="card-trend" :class="item.trend < 0 ? 'negative' : 'positive'">
          <span>{{ item.trend > 0 ? '+' : '' }}{{ item.trend }}%</span>
        </div>
      </div>
    </div>

    <!-- 区域数据 -->
    <div class="area-section">
      <div class="area-left">
        <div class="section-header">
          <span>区域分布</span>
          <el-button size="small" type="primary" plain icon="el-icon-download" @click="handleExportArea">导出</el-button>
        </div>
        <div id="areaPie" class="chart-pie"></div>
      </div>
      <div class="area-right">
        <div class="section-header">
          <span>门店排行</span>
          <el-button size="small" type="primary" plain icon="el-icon-download" @click="handleExportStore">导出</el-button>
        </div>
        <div class="tab-bar">
          <span :class="{'active': storeTab==='amount'}" @click="storeTab='amount'">销售金额</span>
          <span :class="{'active': storeTab==='order'}" @click="storeTab='order'">销售订单</span>
        </div>
        <div id="storeBar" class="chart-bar"></div>
      </div>
    </div>

    <!-- 团长增长表格 -->
    <div class="growth-section">
      <div class="section-header">
        <span>团长增长</span>
        <el-button size="small" type="primary" plain icon="el-icon-download" @click="handleExport">导出</el-button>
      </div>
      <el-table :data="growthTable" border stripe style="width: 100%;">
        <el-table-column prop="date" label="时间" min-width="120" />
        <el-table-column prop="newLeader" label="新增团长" min-width="100" />
        <el-table-column prop="commission" label="团长佣金（元）" min-width="120" />
        <el-table-column prop="activeLeader" label="活跃团长" min-width="100" />
        <el-table-column prop="shareOrder" label="分享订单" min-width="100" />
      </el-table>
      <div class="table-footer">
        <el-pagination
          background
          layout="prev, pager, next, sizes"
          :total="growthTotal"
          :page-size="growthPageSize"
          :current-page="growthPage"
          @size-change="handleSizeChange"
          @current-change="handlePageChange"
          :page-sizes="[10, 20, 50]"
        />
      </div>
    </div>
  </div>
</template>

<style scoped>
.leader-analysis {
  padding: 24px 24px 40px 24px;
  background: #f7f8fa;
  min-height: 100vh;
}
.page-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  background: #fff;
  border-radius: 8px;
  padding: 18px 24px;
  margin-bottom: 18px;
  box-shadow: 0 2px 8px rgba(0,0,0,0.04);
}
.header-title {
  font-size: 20px;
  font-weight: 600;
  color: #222;
}
.header-filter {
  display: flex;
  align-items: center;
  gap: 8px;
}
.filter-label {
  color: #888;
  font-size: 14px;
}
.overview-cards {
  display: flex;
  gap: 24px;
  margin-bottom: 18px;
}
.card {
  flex: 1;
  background: #fff;
  border-radius: 8px;
  box-shadow: 0 2px 8px rgba(0,0,0,0.04);
  padding: 24px 0 18px 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  position: relative;
}
.card-value {
  font-size: 32px;
  font-weight: 700;
  color: #222;
  margin-bottom: 8px;
}
.card-label {
  font-size: 15px;
  color: #888;
  margin-bottom: 8px;
}
.card-trend {
  font-size: 13px;
  font-weight: 500;
  position: absolute;
  right: 18px;
  top: 18px;
}
.card-trend.positive { color: #67c23a; }
.card-trend.negative { color: #f56c6c; }
.area-section {
  display: flex;
  gap: 24px;
  margin-bottom: 18px;
}
.area-left, .area-right {
  flex: 1;
  background: #fff;
  border-radius: 8px;
  box-shadow: 0 2px 8px rgba(0,0,0,0.04);
  padding: 18px 24px 18px 24px;
  display: flex;
  flex-direction: column;
}
.section-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 16px;
  font-weight: 600;
  color: #222;
  margin-bottom: 8px;
}
.chart-pie {
  width: 100%;
  height: 260px;
}
.chart-bar {
  width: 100%;
  height: 260px;
  margin-top: 12px;
}
.tab-bar {
  display: flex;
  gap: 16px;
  margin-top: 4px;
}
.tab-bar span {
  font-size: 14px;
  color: #888;
  cursor: pointer;
  padding: 2px 12px;
  border-radius: 16px;
  transition: background 0.2s, color 0.2s;
}
.tab-bar .active {
  background: #409eff;
  color: #fff;
}
.growth-section {
  background: #fff;
  border-radius: 8px;
  box-shadow: 0 2px 8px rgba(0,0,0,0.04);
  padding: 18px 24px 12px 24px;
}
.table-footer {
  display: flex;
  justify-content: flex-start;
  margin-top: 8px;
}
@media (max-width: 1000px) {
  .overview-cards, .area-section { flex-direction: column; gap: 16px; }
  .area-left, .area-right { padding: 12px; }
}
</style>